<template>
	<view :class="currentTheme">
		<a-nabbar name="收益统计" />
		<mescroll-body  @init="mescrollInit"  @down="downCallback"  @up="upCallback">
			<view class="u-padding-32">
				<item-search placeholder="请输入剧本名" @change="downCallback" v-model="form.name"></item-search>
				<view class="u-margin-top-20 u-flex">
					<view class="u-flex-1 u-flex">
						<view class="u-flex-1">
							<select-item  v-model="form.startTimeStr" :border="false" mode="time" ref="startTime" @getSelect="getChange" />
						</view>
						<text class="u-padding-left-20 u-padding-right-20 u-font-30 text-order-666">至</text>
						<view class="u-flex-1">
							<select-item  v-model="form.endTimeStr" mode="time" :border="false"  ref="endTime"  @getSelect="getChange" />
						</view>
					</view>
				</view>
			</view>
			<view class=" u-padding-left-32 u-padding-right-32">
				<view  v-for="(item,index) in dataList" :key="index" class="u-margin-top-20">
					<item-box  :padding="30">
						<view class="u-flex u-col-top">
							<item-image :img="item.image" width="180" height="180" radius="12"></item-image>
							<view class="u-flex-1 u-margin-left-28" style="line-height: 1;">
								<view class="u-margin-bottom-6 u-font-32  box-title text-bold">{{item.name}}</view>
								<view class="u-flex u-padding-top-16 text-order-time">
									<flex-text txt="完成日期" size="24" width="100"></flex-text>
									<text class="u-font-24">：{{item.createTime | timeFormat}}</text>
								</view>
								<view class="u-flex u-padding-top-24 text-order-time">
									<flex-text txt="单价" size="24" width="100"></flex-text>
									<text class="u-font-24">：{{item.price || 0}}</text>
								</view>
								<view class="u-flex u-padding-top-24 text-order-time">
									<flex-text txt="销量" size="24" width="100"></flex-text>
									<text class="u-font-24">：{{item.productNum || 0}}</text>
								</view>
								<view class="u-flex u-row-right">
									<view class="u-font-30 box-title text-bold u-margin-right-20">总计</view>
									<money :price="item.total" size="36"></money>
								</view>
							</view>
						</view>
					</item-box>
				</view>
			</view>
		</mescroll-body>
		<fixed-team>
			<view class="u-flex u-flex-1">
				<view class="u-flex-1">
				</view>
				<view class="u-flex">
					<text class="u-font-32 box-title text-bold">合计：</text>
					<money :price="sumPrice" color="#765CFE" size="40"></money>
				</view>
			</view>
		</fixed-team>
	</view>
</template>

<script>
	import upCallback from '@/mixins/upCallbackMixin.js'
	import dayjs from 'dayjs';
	import itemSearch from '@/components/itemSearch/itemSearch.vue'
	export default {
		mixins:[upCallback],
		components: {
			itemSearch
		},
		data() {
			return {
				dataList:[],
				apiModule:'shopApi',
				apiType:'incomeStatistics',
				value:'',
				form:{
					name:'',
					startTime:'',
					endTime:'',
					endTimeStr:'',
					startTimeStr:'',
					
				},
				timer:null,
				name:'getIncomeStatisticsByCon',
				sumPrice:0
			}
		},
		onLoad() {
			this.form.creatorId = this.loginForm.uid;
		},
		methods: {
			dataListCallBack({sumPrice}){
				this.sumPrice = sumPrice
			},
			//获取选择的时间
			getChange(item){
				setTimeout(()=>{
					const startTimeref = this.$refs.startTime;
					const endTimeref = this.$refs.endTime;
					if(startTimeref.value && endTimeref.value){
						const startTime = startTimeref.value+" 00:00:00"
						const endTime = endTimeref.value+" 00:00:00";
						if(dayjs(startTime).unix()<dayjs(endTime).unix()){
							//开始时间大于结束时间则不调用
							this.form.startTime = startTime;
							this.form.endTime = endTime
							this.downCallback()
						}else{
							uni.showModal({
								showCancel:false,
								content:'结束时间小于开始时间，请重新设置',
								title:'温馨提示'
							})
						}
					}
				},10)
			},
		},
	}
</script>
